<template>
    <div class="page_1">
        <div class="top_box">
            <div class="top_box_item" style="flex:1">
                <span>管理中心名称</span>
                <div class="gun"></div>
                <span>问卷总数</span>
                <div class="gun"></div>
                <span>任务总数</span>
                <div class="gun"></div>
                <span>完成比例</span>
            </div>
            <div v-for="item in admin" style="flex:1;cursor:pointer" :key="item.id" class="top_box_item" @click="change(item.id)">
                <span>{{ item.nickname }}</span>
                <div class="gun"></div>
                <span>{{ item.total }}</span>
                <div class="gun"></div>
                <span>{{ item.trade_num }}</span>
                <div class="gun"></div>
                <span>{{ item.percentage }}%</span>
            </div>
        </div>

        <div class="top_search">
            <span>当前管理中心：</span>
            <div>
                <el-select v-model="admin_id" placeholder="请选择管理中心" :disabled="!(this.role == 16 || this.role == 20)">
                    <el-option v-for="item in adminUser" :key="item.id" :label="item.nickname" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div style="display: flex;">
                <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" style="margin-left:10px" end-placeholder="结束日期">
                </el-date-picker>
                <!-- <el-select v-model="department" placeholder="请选择" style="margin-left:10px">
                    <el-option v-for="item in PDepartment" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select> -->
                <el-button type="warning" @click="search" style="margin-left:10px">搜索</el-button>
                <el-button style="margin-left:10px" @click="reset" type="primary">重置</el-button>
                <el-button type="primary" style="margin-left:10px" icon="el-icon-upload" size="small " @click="leadingOut">导出</el-button>
            </div>
        </div>
        <el-table :data="data" style="width: 100%" border>
            <el-table-column prop="p_road_name" label="收费站/服务区/管理中心">
            </el-table-column>
            <el-table-column prop="answer_total" label="问卷总数">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { post } from "@/assets/js/http.js"
import queryString from "qs";
export default {
    data() {
        return {
            data: [],
            admin: [],
            adminUser: [],
            admin_id: '',
            nickname: "",
            role: localStorage.getItem('role'),
            time: [],
            // PDepartment: [],
            // department: ""
        }
    },
    methods: {
        getInfo() {
            let role = localStorage.getItem('role')
            let admin_id
            let timeList
            if (role == 16 || role == 20 || role == 1) {
                admin_id = 59
            } else {
                admin_id = localStorage.getItem('id')
            }
            if (this.time.length) {
                timeList = this.time.map(i => i / 1000)
            }
            if (this.admin_id) {
                admin_id = this.admin_id
            }
            post({
                url: "/admin/answer.Census/wjfx_census",
                data: {
                    id: admin_id,
                    time: timeList,
                    // p_department_id: this.department
                },
                loading: true
            }).then(res => {
                console.log(res);
                this.admin = res.admin
                this.data = res.p_road
                this.nickname = res.nickname
                this.admin_id = res.id * 1
            })
        },
        getPDepartment() {
            post({
                url: "/admin/answer.Census/p_department"
            }).then(res => {
                this.PDepartment = res
            })
        },
        // getList(id) {
        //     post({
        //         url: "/admin/answer.Census/wjfx_census",
        //         data: {
        //             id: id
        //         },
        //         loading: true
        //     }).then(res => {
        //         this.admin = res.admin
        //         this.data = res.p_road
        //         this.nickname = res.nickname
        //         this.admin_id = res.id * 1
        //     })
        // },
        //  获取管理中心
        getAdminUser() {
            post({
                url: "/admin/answer.Subject/admin_list"
            }).then(res => {
                this.adminUser = res
            })
        },
        // change(e) {
        //     if (this.role == 16 || this.role == 20) {
        //         this.getList(e)
        //     }
        // },
        // 搜索
        search() {
            this.getInfo()
        },
        // 重置
        reset() {
            let role = localStorage.getItem('role')
            this.time = []
            // this.department = ""
            if (role == 16 || role == 20 || role == 1) {
                this.admin_id = 59
            }
            this.getInfo()
        },
        leadingOut() {
            let role = localStorage.getItem('role')
            let admin_id
            let timeList
            if (role == 16 || role == 20 || role == 1) {
                admin_id = 59
            } else {
                admin_id = localStorage.getItem('id')
            }
            if (this.time.length) {
                timeList = this.time.map(i => i / 1000)
            }
            open("http://nhcj.app65.cn/api/realmerit/wjdcfx_export?" + queryString.stringify({
                id: admin_id,
                time: timeList,
                // p_department_id: this.department
            }))
        }
    },
    mounted() {
        this.getInfo()
        this.getAdminUser()
        // this.getPDepartment()
    }
}
</script>

<style lang="scss" scoped>
.top_search {
    width: 100%;
    background-color: #fff !important;
    box-shadow: inset 0 0 1rem #f2f2f2 !important;
    height: 50px;
    display: flex;
    align-items: center;
    // justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
    font-weight: 500;
    color: #222;
    margin-bottom: 10px;

    & span:first-child {
        font-size: 24px !important;
        font-size: 1.8rem;
        color: #222;
    }

    & span:last-child {
        font-size: 20px !important;
    }
}

.top_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;

    .top_box_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #222;
        padding: 10px;
        box-shadow: inset 0 0 1rem #ccc !important;
        span {
            display: block;
            height: 2.4em;
            line-height: 1.2em;
            display: flex;
            align-items: center;
        }
        .gun {
            width: 100%;
            height: 1px;
            background: #20bcfc;
            margin: 2px 0;
        }
    }
}
</style>